<template>
  <div v-show="visible" class="back-to-top" @click="backToTop">
    <i class="el-icon-caret-top"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      interval: null,
      scrollPercentage: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    handleScroll() {
      this.visible = window.scrollY > 300
    },
    backToTop() {
      window.scrollTo({
        top: 0, // 滚动到顶部
        behavior: 'instant' // 立即跳转，不进行平滑滚动
      });
    }
  }
}
</script>

<style scoped>
.back-to-top {
  position: fixed;
  bottom: 20px;
  left: 600px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #65a9f1;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}

.back-to-top:hover {
  background-color: #0571df;
}
</style>
